import React, { Component } from 'react';
import { createRoot } from 'react-dom/client';
class ScrollList extends React.Component {
    constructor(props) {
        super(props);
        this.state = { messages: [] };//定义初始状态，里面放置一个messages空数组
        this.wrapperRef = React.createRef();//{current:null}
    }
    componentDidMount(){
        //在组件挂载成功后，每隔1秒钟进行状态更新
        //修改messages,在老的messages数组的最前面添加一个元素，元素值就是数组的长度
        this.timer = setInterval(()=>{
            this.setState({// [4 ,3, 2, 1 ,0]
                messages:[`${this.state.messages.length}`,...this.state.messages]
            });
        },1000);
    }
    componentWillUnmount(){
        clearInterval(this.timer);
    }
    get wrapper() {
        return this.wrapperRef.current;
    }
    //此方法会DOM更新调用，所以可以获取DOM更新前的信息
    getSnapshotBeforeUpdate(){
        return {
            prevScrollTop:this.wrapper.scrollTop,//容器向上滚动的高度 50px
            prevScrollHeight:this.wrapper.scrollHeight//容器内容的高度 200px
        }
    }
    //在执行componentDidUpdate的时候DOM已经更新完毕了，可以获取最新的DOM信息了
    //getSnapshotBeforeUpdate返回值会传递给componentDidUpdate第3个参数
    componentDidUpdate(prevProps,prevState,{prevScrollTop,prevScrollHeight}){
        //计算最新的scrollTop值为老的scrollTop值加上增加的内容高度
        this.wrapper.scrollTop=prevScrollTop+(
            this.wrapper.scrollHeight-prevScrollHeight
        )
    }
    render() {
        let styleObj = {
            height: '100px',
            width: '200px',
            border: '1px solid red',
            overflow: 'auto'
        }
        return (
            <div style={styleObj} ref={this.wrapperRef}>
                {
                    this.state.messages.map((message,index)=>(
                        <div key={index}>{message}</div>
                    ))
                }
            </div>
        )
    }
}
let element = <ScrollList />
let root = createRoot(document.getElementById('root'))
root.render(element);
